<template>
  <div class="error">
    <!-- 手机端样式 -->
    <div>
      <IndexHeader :showLang="true" />
      <div class="content">
        <img class="err-img" src="~assets/img/404.svg" />
        <p class="err-title">{{ $t('404_Tip') }}</p>
        <p class="err-text">{{ $t('Wrong_prompt') }}</p>
        <div class="err-btn" @click="backIndex">
          {{ $t('Back_Tip').replace('X', this.secondText) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
export default {
  head() {
    return {
      htmlAttrs: {
        lang: this.$store.getters.localeFull
      }
    }
  },
  data() {
    return {
      secondText: 5, // 秒数
      timer: null //计时器
    };
  },
  components: {
    IndexHeader
  },
  mounted() {
    this.$nextTick(() => {
      if (process.client) {
        this.timer = setInterval(() => {
          if (this.secondText > 0) {
            this.secondText--;
          } else {
            //倒计时小于0时返回首页
            this.backIndex();
          }
        }, 1000);
      }
    });
  },
  methods: {
    /* 返回首页 */
    backIndex() {
      clearInterval(this.timer);
      this.$router.push('/' + this.$i18n.locale + '/m');
    }
  }
};
</script>

<style lang="scss" scoped>
.error {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* 手机端 */
  .content {
    text-align: center;
    margin-top: 362px;
    .err-img {
      display: block;
      width: 256px;
      margin: 0 auto 30px;
    }
    .err-title {
      font-size: 32px;
      color: #0c0c1c;
      letter-spacing: 0;
      font-weight: bold;
      text-align: center;
      line-height: 48px;
    }
    .err-text {
      text-align: center;
      margin-top: 12px;
      font-size: 28px;
      color: #0c0c1c;
      letter-spacing: 0;
      text-align: center;
      line-height: 40px;
    }
    .err-btn {
      display: inline-block;
      width: 582px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      margin: 48px 0 0 0;
      background: #fa4646;
      border-radius: 40px;
      border-radius: 50px;
      font-size: 32px;
    }
  }
}
</style>
